<!--
 * @Description: 文书--头部
 * @Author: E-CHOOSEUS R&D
 * @Date: 2021-11-19 09:28:54
 * @LastEditors: E-CHOOSEUS R&D
-->
<template>
  <div class="doc-header-bigSize">
    <header>
      <div>
        <img
          :src="logo1"
          :alt="docHeaderLogo1Title1 + '&' + docHeaderLogo1Title2 + '院徽'"
        />
        <div>
          <span class="text-justify">{{ docHeaderLogo1Title1 }}</span>
          <span class="title" v-html="titleArr"></span>
        </div>
      </div>
      <div>
        <img :src="logo2" :alt="docHeaderLogo2Title + '院徽'" />
        <span>{{ docHeaderLogo2Title }}</span>
      </div>
    </header>
    <div v-if="patCur" class="user-info">
      <h5>体温单</h5>
      <div class="info">
        <div v-for="(item, idx) in userInfo" v-show="idx !== '性别'" :key="idx">
          <span>{{ idx }}</span>
          <span v-if="item == 'patientName'">{{ nameArr.join('→') }}</span>
          <span v-else-if="item == 'bedNumber'">{{ bedArr.join('→') }}</span>
          <span v-else-if="item == 'wardName'">{{ wardArr.join('→') }}</span>
          <span v-else>{{ patCur[item] }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import { createNameAndBedArr } from '@/utils/createNameAndBedArr.js'
import { formatTimeStamp } from '@/utils/index.js'
import { getStoreFromInstance } from '@/utils/instance'

export default defineComponent({
  name: 'DocBaseInfo',
  props: {
    recordData: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {
    const state = reactive({
      titleArr: '',
      userInfo: {
        姓名: 'patientName',
        病区: 'wardName',
        出生日期: 'birthdayName',
        // 住院号: "hospitalNumber",
        病历号: 'hospitalNumber',
        床号: 'bedNumber',
        性别: 'genderName'
      },
      nameArr: [],
      bedArr: [],
      wardArr: [],
      hospitalName: window.hospitalName,
      docHeaderLogo1Title1: window.docHeaderLogo1Title1,
      docHeaderLogo1Title2: window.docHeaderLogo1Title2,
      docHeaderLogo2Title: window.docHeaderLogo2Title,
      logo1:
        '',
      logo2:
        ''
    })

    const store = getStoreFromInstance()

    const patCur = computed(() => store.getters.patCur)

    function initData() {
      const txt = state.docHeaderLogo1Title2,
        arr = txt.split('')
      let title = ''
      arr.map(res => {
        title += `<span>${res}</span>`
      })
      state.titleArr = title
    }

    function getNameAndBed() {
      if (patCur.value) {
        const originBedList = patCur.value.bedList || [] // 所有的床号列表原始数据结构
        const originNameList = patCur.value.nameList || [] // 所有的姓名列表原始数据结构
        const originWardList = patCur.value.wardList || [] // 所有的姓名列表原始数据结构
        const { nameArr, bedArr, wardArr } = createNameAndBedArr(
          originBedList,
          originNameList,
          originWardList,
          props.recordData
        )
        state.nameArr = nameArr
        state.bedArr = bedArr
        state.wardArr = wardArr
      } else {
        setTimeout(() => {
          getNameAndBed()
        }, 200)
      }
    }

    watch(
      patCur,
      n => {
        if (n) {
          n.genderName = n.gender === 1 ? '男' : '女'
          n.birthdayName =
            (n.birthday && formatTimeStamp(n.birthday, 'yyyy-MM-dd')) || ''
        }
      },
      { immediate: true }
    )

    watch(
      () => props.recordData,
      val => {
        if (val) {
          getNameAndBed()
        }
      },
      { deep: true, immediate: true }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      patCur
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';

.doc-header-bigSize {
  width: 960px;
  margin: 0 auto;
}

header {
  margin: 2px 0 30px;
  padding-top: getpx(110);
  display: grid;
  grid-template-columns: getpx(909) auto;
  font-family: SiYuanSong-Bold;
  transform: scale(1.44) translateX(147px);

  & > div {
    display: flex;
    align-items: center;

    img {
      margin-right: getpx(15);
    }

    &:nth-child(1) {
      font-size: getpx(50);

      img {
        height: getpx(156);
      }

      & > div {
        width: getpx(660);
      }

      span {
        height: getpx(55);
        display: block;

        &.title {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }

    &:nth-child(2) {
      font-size: getpx(60);

      img {
        height: getpx(117);
      }
    }
  }
}

.user-info {
  font-family: SiYuanSong-Medium;
  margin-top: getpx(50);
  padding-bottom: getpx(23);
  display: flex;
  flex-direction: column;

  h5 {
    margin: 0;
    text-align: center;
    font-size: getpx(60);
    font-weight: normal;
    letter-spacing: getpx(2);
  }

  &.end {
    flex-direction: column-reverse;

    h5 {
      margin-top: getpx(52);
      padding-top: getpx(40);
      border-top: 1px solid #000;
    }
  }

  .info {
    padding-top: getpx(20);
    display: flex;
    justify-content: space-around;
    font-size: getpx(46);

    & > div {
      // width: calc(100% / 6);
      display: flex;
      flex-direction: column;

      span {
        text-align: center;

        &:nth-child(2) {
          margin-top: getpx(27);
        }
      }

      .titleInner {
        font-size: 19px;
        text-align: center;
        margin-top: 13px;
      }
    }
  }
}
</style>
